<template>
	<div>
		<el-card class="box-card" :style="{marginBottom: '20px'}">
			<el-label-wrap>
				<span style="margin-right: 10px;">数据分析与统计结果</span>
				<el-tag :type="resultIcon">{{ tip }}</el-tag>
			</el-label-wrap>
		</el-card>
		<el-card class="box-card" :style="{marginBottom: '20px'}">
			<el-row :gutter="21">
				<el-col :span="7">
					<!--热门商品分析-->
					<el-button type="success" round @click="hotItemsAnalysis">
						热门商品分析
					</el-button>
				</el-col>
				<el-col :span="7">
					<!--热门页面分析-->
					<el-button type="success" round @click="hotPagesAnalysis">
						热门页面分析
					</el-button>
				</el-col>
				<el-col :span="7">
					<!--Kafka热门商品统计-->
					<!--<el-button type="success" round @click="kafkaHotItemsAnalysis">
						Kafka热门商品分析
					</el-button>-->
				</el-col>
			</el-row>
		</el-card>

		<el-card class="box-card" :style="{marginBottom: '20px'}">
			<el-row :gutter="21">
				<el-col :span="7">
					<!--PV统计-->
					<el-button type="success" round @click="pvAnalysis">
						PV统计
					</el-button>
				</el-col>
				<el-col :span="7">
					<!--set uv分析-->
					<el-button type="success" round @click="setUvAnalysis">
						Set UV分析
					</el-button>
				</el-col>
				<el-col :span="7">
					<!--bloom uv分析-->
					<el-button type="success" round @click="bloomUvAnalysis">
						Bloom UV分析
					</el-button>
				</el-col>
			</el-row>
		</el-card>

		<el-card class="box-card" :style="{marginBottom: '20px'}">
			<el-row :gutter="21">
				<el-col :span="7">
					<!--市场推广统计-->
					<el-button type="success" round @click="marketingAnalysis">
						市场推广统计
					</el-button>
				</el-col>
				<el-col :span="7">
					<!--广告数据分析-->
					<el-button type="success" round @click="advertisingAnalysis">
						广告数据分析
					</el-button>
				</el-col>
				<el-col :span="7">
					<!--恶意登录分析-->
					<el-button type="success" round @click="loginFailAnalysis">
						恶意登录检测
					</el-button>
				</el-col>
			</el-row>
		</el-card>
	</div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue';
import { get } from '@/api/http';
import { ElMessage } from 'element-plus';

export default defineComponent({
	name: 'Dashboard',
	props: {},
	setup () {
		const tip = ref('数据分析与统计');
		const isLoading = ref(false);
		const resultType = ref('success');

		const analysis = (url, jobName) => {
			get(url).then(res => {
				if (res.data.code === 200) {
					console.log(`${jobName} - ${res.data.code}`);
					ElMessage.success(res.data.message);
					resultType.value = 'success';
					tip.value = `${jobName}任务完成`;
				} else {
					ElMessage.error(res.data.message);
					resultType.value = 'warning';
					tip.value = `${jobName}任务失败`;
				}
			}).catch(err => {
				ElMessage.error(`数据分析出错, ${err.msg}`);
				resultType.value = 'danger';
				tip.value = `${jobName}任务失败`;
			});
		};

		const method = reactive({
			hotItemsAnalysis: () => {
				analysis('/file-hot-items/analysis', '离线热门商品统计');
			},
			hotPagesAnalysis: () => {
				analysis('/file-hot-pages/analysis', '离线热门页面统计');
			},
			kafkaHotItemsAnalysis: () => {
				analysis('/kafka-hot-items/analysis', 'Kafka实时热门商品统计');
			},
			pvAnalysis: () => {
				analysis('/file-pv/analysis', 'PV统计');
			},
			setUvAnalysis: () => {
				analysis('/set-uv/analysis', 'SetUV统计');
			},
			bloomUvAnalysis: () => {
				analysis('/bloom-uv/analysis', 'BloomUV统计');
			},
			marketingAnalysis: () => {
				analysis('/channel-marketing/analysis', '市场推广统计');
			},
			advertisingAnalysis: () => {
				analysis('/blacklist-advertising/analysis', '广告数据分析');
			},
			loginFailAnalysis: () => {
				analysis('/login-fail/analysis', '恶意登录检测');
			}
		});

		return {
			...toRefs(method),
			tip,
			isLoading,
			resultIcon: resultType
		};
	}
});
</script>

<style scoped>

</style>
